// tslint:disable
import { ChangeDetectionStrategy, Component, ElementRef, Input, QueryList, Renderer2, ViewChild, ViewChildren } from '@angular/core';
export interface ImageSlider {
  imgUrl: string;
  link: string;
  caption: string;

}
@Component({
  selector: 'app-Image-slider',
  templateUrl: './Image-slider.component.html',
  styleUrls: ['./Image-slider.component.scss'],
  changeDetection: ChangeDetectionStrategy.OnPush
})
export class ImageSliderComponent {

  @Input() sliders: ImageSlider[] = [];
  @Input() sliderHeight = '160px';
  @Input() intervalBaySeconds = 2;
  @ViewChild('imageSlider', { static: true }) imgSlider: ElementRef | undefined;
  @ViewChildren('img') imgs: QueryList<ElementRef> | undefined;

  sekectedIndex = 0;
  intervalId: any;

  constructor(private rd2: Renderer2) { }


  ngAfterViewInit(): void {
    this.intervalId = setInterval(() => {
      this.rd2.setProperty(
        this.imgSlider?.nativeElement,
        'scrollLeft',
        (this.getIndex(++this.sekectedIndex) *
          this.imgSlider?.nativeElement.scrollWidth) /
          this.sliders.length
      );
    }, this.intervalBaySeconds * 1000);

  }
  getIndex(idx: number): number {
    return idx >= 0 ? idx % this.sliders.length
      : this.sliders.length - (Math.abs(idx) % this.sliders.length);
  }
  // tslint:disable-next-line:typedef
  handleScroll(ev: any) {
    const ratio =
      (ev.target.scrollLeft * this.sliders.length) / ev.target.scrollWidth;
    this.sekectedIndex = Math.round(ratio);
  }
  // tslint:disable-next-line:use-lifecycle-interface
  ngOnDestroy(): void {
    if (this.intervalId) {
      clearInterval(this.intervalId);
    }
  }

}
